<template>
  <swiper class="swiper" :duration="duration" :current="swiperIndex" :disable-programmatic-animation="true"
          @change="onChange" @animationfinish="onAnimationfinish"
  >
    <swiper-item v-for="(item, index) in swiperList" :key="index">
      <slot :item="item"></slot>
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  props: {
    dataList: {
      // 数据源
      type: Array,
      default: () => []
    },
    current: {
      // 轮播图当前位置
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      swiperList: [], // 轮播图数据列表
      swiperIndex: 0, // 轮播图当前位置
      isChange: false, // 是否切换
      currentIndex: 0, // 真正数组中的位置
      duration: 200 // 动画过渡时长
    }
  },
  watch: {
    dataList: {
      // 数据源
      handler(nVal, oVal) {
        if (!nVal || !nVal[0]) return
        this.renderSwiper(this.current)
      },
      // deep:true,
      immediate: true
    },
    current: {
      // 当前项
      handler(nVal, oVal) {
        this.renderSwiper(nVal)
      }
    }
  },
  methods: {
    // 渲染 swiper
    renderSwiper(index) {
      this.currentIndex = index
      const list = []
      let current = 1
      if (this.dataList[index - 1]) {
        list.push(this.dataList[index - 1])
      }
      else {
        current = 0
      }

      list.push(this.dataList[index])

      if (this.dataList[index + 1]) {
        list.push(this.dataList[index + 1])
      }
      this.duration = 0

      setTimeout(() => {
        this.swiperList = list
        this.swiperIndex = current

        setTimeout(() => {
          this.duration = 200
        }, 10)
      }, 10)
    },
    // 轮播图切换
    onChange(e) {
      // 非触摸事件不做轮播图状态更新
      if (e.detail.source !== 'touch') return
      // 标识已切换
      this.isChange = true
      // 轮播图当前位置大于原来时则表示为下一题
      if (e.detail.current > this.swiperIndex) {
        this.currentIndex++
      }
      else {
        // 轮播图当前位置小于原来时则表示为上一题
        this.currentIndex--
      }
      // 更新轮播图位置数值，为更新时让 Vue 能监听到数据有改变
      this.swiperIndex = e.detail.current
      this.$emit('currentIndex', this.currentIndex)
    },
    // 轮播图动画结束
    onAnimationfinish(e) {
      if (!this.isChange) return
      this.isChange = false
      setTimeout(() => {
        this.renderSwiper(this.currentIndex)
      }, 10)
    }
  }
}
</script>

<style lang="scss" scoped></style>
